<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
    ></search-header>
    <multi-fun-table
      :sortColumn="notFormatColumn"
      :orderType="sortType"
      :fixed-cols="fixedCols"
      :is-reset-table="isResetTable"
      :theads-info="theadsInfo"
      :tbodys-info="tbodysInfo"
      @handleMultiCheck="handleMultiCheck"
      @handleSortColumn="handleSortColumn"
      @searchFn="getList"
      @getNextPage="getNextPage"
    >
      <div class="operate-btn-group" slot="operateBtnGroup">
        <a
          class="ake_btn ake_btn_text"
          v-if="isPermmited('MGR:SHARE:WATER:EXPORT')"
          @click.prevent="exportData()"
        >导出</a>
      </div>
      <template slot="tdCell" slot-scope="props">
        <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
          <template v-for="(item, index) in props.children">
            <el-table-column
              v-if="item.checked"
              :key="index"
              :label="item.text"
              :min-width="item.minWidth"
              :width="item.width"
              :prop="item.prop"
              :sortable="item.sortable"
            >
              <template slot-scope="scope">{{ scope.row[item.prop] |formatMoney }}</template>
            </el-table-column>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :fixed="props.fixed"
          :label="props.label"
          :min-width="props.minWidth"
          :width="props.width"
          :prop="props.prop"
          :sortable="props.sortable"
        >
          <template slot-scope="scope">
            <span v-if="'reno' == props.prop">{{scope.$index+1}}</span>
            <span v-else-if="'shareFrom' == props.prop && scope.row['shareFrom']">
              <!-- <a class="imgLink" @click="showDataModal(scope.$index)">查看</a> -->
              {{scope.row['shareFrom'] | mileSecondToDate}}至{{scope.row['shareTo'] | mileSecondToDate}}
            </span>
            <span
              v-else-if="'shouldTotal' == props.prop || 'parkingValue' == props.prop || 'parkingPlatformValue' == props.prop|| 'parkingParkValue' == props.prop|| 'shareOwnerValue' == props.prop|| 'serveValue' == props.prop|| 'servePlatformValue' == props.prop|| 'serveParkValue' == props.prop|| 'parkRealValue' == props.prop|| 'platformRelief' == props.prop|| 'timeoutValue' == props.prop|| 'preParkingValue' == props.prop|| 'onlinePayValue' == props.prop|| 'offlinePayValue' == props.prop|| 'oweValue' == props.prop"
            >
              <span v-if="'platformRelief' == props.prop || 'onlinePayValue' == props.prop">
                <a
                  class="imgLink"
                  @click="'platformRelief' == props.prop?PlatformReliefModal_open(scope.$index):OnlinePayValueModal_open(scope.$index)"
                >{{scope.row[props.prop] | formatMoney}}</a>
              </span>
              <span v-else>{{scope.row[props.prop] | formatMoney}}</span>
            </span>
            <span
              v-else-if="'updateTime' == props.prop"
            >{{scope.row[props.prop] | mileSecondToDate}}</span>
            <span v-else-if="'status' == props.prop">
              <span v-if="scope.row[props.prop]!==0">{{scope.row[props.prop] | status}}</span>
              <a
                v-else
                class="imgLink"
                @click="examineModal_open(scope.$index,scope.row.id)"
              >{{scope.row[props.prop] | status}}</a>
            </span>
            <span v-else>{{ scope.row[props.prop] }}</span>
          </template>
        </el-table-column>
      </template>
    </multi-fun-table>

    <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>

    <basic-modal ref="OnlinePayValueModal" static="true" width="800">
      <h3 slot="title">线上支付详情</h3>
      <div class="ModalBody modal-body" slot="modal-body">
        <ul class="HeadMSG">
          <li>
            <span class="title">订单编号：</span>
            <span class="text">{{OnlinePayValueModalData.topBillCode}}</span>
          </li>
          <li>
            <span class="title">线上支付金额：</span>
            <span class="text">{{OnlinePayValueModalData.onlinePayValue}}</span>
          </li>
        </ul>
        <div class="tableDetial">
          <el-table :data="OnlinePayValueModalData.list" border style="width: 100%">
            <el-table-column type="index" width="58"></el-table-column>
            <el-table-column prop="typeName" label="费用类型"></el-table-column>
            <el-table-column label="线上支付渠道">
              <template slot-scope="scope">
                <span>{{ scope.row.payType | payType}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="payValue" label="支付金额（元）"></el-table-column>
            <el-table-column label="支付时间" width="170">
              <template slot-scope="scope">
                <span>{{ scope.row.payTime | mileSecondToDate}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="closed('OnlinePayValueModal')"
        >确定</button>
        <!-- <button class="ake_btn ake_btn_text modal-close" @click="examineModal_save($event,'examine_form')">确定</button> -->
      </div>
    </basic-modal>
    <basic-modal ref="PlatformReliefModal" static="true" width="800">
      <h3 slot="title">优惠详情</h3>
      <div class="ModalBody" slot="modal-body">
        <ul class="HeadMSG">
          <li>
            <span class="title">订单编号：</span>
            <span class="text">{{PlatformReliefModalData.topBillCode}}</span>
          </li>
          <li>
            <span class="title">优惠金额：</span>
            <span class="text">{{PlatformReliefModalData.onlinePayValue | formatMoney}}</span>
          </li>
        </ul>
        <div class="tableDetial">
          <el-table :data="PlatformReliefModalData.couponList" border style="width: 100%">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="couponType" label="优惠类型"></el-table-column>
            <el-table-column prop="couponName" label="优惠名称"></el-table-column>
            <el-table-column prop="couponValue" label="优惠金额"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('PlatformReliefModal')">确定</button>
        <!-- <button class="ake_btn ake_btn_text modal-close" @click="examineModal_save($event,'examine_form')">确定</button> -->
      </div>
    </basic-modal>
    <big-pic-modal ref="bigPicModal">
      <img
        slot="bigImgSlot"
        :src="bigImgPath | setImgPath"
        alt
        @error="imgError('../../', 'car', $event)"
      />
    </big-pic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import BigPicModal from "@components/widgets/BigPicModal.vue";

// image
import images from "@mixins/image.js";

// 引进vue的js
import water from "./js/water.js";
export default {
  name: "shareWater",
  mixins: [common, stardardList, invokeModal, images, water],
  components: {
    BigPicModal
  },
  data() {
    return {
      fixedCols: 3,
      total: 0,
      PlatformReliefModalData: {
        list: [],
        topBillCode: "",
        couponValue: ""
      },
      OnlinePayValueModalData: {
        list: [],
        topBillCode: "",
        onlinePayValue: ""
      },
      rules: {
        parkingSpaceNumber: [
          { required: true, message: "请输入车位编号", trigger: "blur" }
        ]
      },
      //prop-返回数据的字段名称   proisNotInter:true,pNameisNotInter:true,，name-查询字段传参名称    text-显示名称  //initHidden  初始化不显示
      searchList: [
        {
          type: "text",
          isShow: false,
          name: "query_parkName",
          text: "停车场",
          value: ""
        },
        {
          type: "text",
          isShow: false,
          name: "query_parkingSpaceNumber",
          text: "车位编号",
          value: ""
        },
        {
          type: "text",
          isShow: false,
          name: "query_userName",
          text: "业主姓名",
          value: ""
        },
        {
          type: "text",
          isShow: false,
          name: "query_carCode",
          text: "租用车牌号码",
          value: ""
        },

        {
          type: "select",
          isShow: false,
          name: "query_status",
          text: "订单状态",
          value: "",
          options: [
            { name: "全部", value: "" },
            { name: "付款成功", value: "1" },
            { name: "付款失败", value: "2" },
            { name: "生效中", value: "3" },
            { name: "已完成", value: "4" },
            { name: "已取消", value: "5" },
            { name: "待付款", value: "6" }
          ]
        },
        {
          type: "select",
          isShow: false,
          name: "query_oweStatus",
          text: "欠费状态",
          value: "",
          options: [
            { name: "全部", value: "" },
            { name: "不欠费", value: "0" },
            { name: "欠费", value: "1" }
          ]
        },
        {
          type: "datePicker",
          isShow: false,
          name: "query_time",
          text: "租用时间",
          propName: "query_shareTimeFrom,query_shareTimeTo",
          value: "",
          style: { width: "360px" }
        }
      ],
      theadsInfo: [
        { index: 0, isShow: false, prop: "reno", text: "序号", width: 64 },
        {
          index: 1,
          isShow: false,
          prop: "topBillCode",
          text: "订单编号",
          sortable: true,
          minWidth: 220
        },
        {
          index: 2,
          isShow: false,
          prop: "statusShow",
          text: "订单状态",
          sortable: true,
          minWidth: 150
        },
        {
          index: 3,
          isShow: false,
          prop: "parkName",
          text: "停车场",
          sortable: true,
          minWidth: 180
        },
        {
          index: 4,
          isShow: false,
          prop: "shareParkingSpaceNumber",
          text: "车位编号",
          sortable: true,
          minWidth: 180
        },
        {
          index: 5,
          isShow: false,
          prop: "userName",
          text: "业主姓名",
          sortable: true,
          minWidth: 110
        },
        {
          index: 6,
          isShow: false,
          prop: "carCode",
          text: "租用车牌号码",
          sortable: true,
          minWidth: 150
        },
        {
          index: 7,
          isShow: false,
          prop: "shareFrom",
          text: "租用时间",
          sortable: true,
          minWidth: 330
        },
        {
          index: 8,
          isShow: false,
          prop: "shouldTotal",
          text: "订单合计",
          sortable: true,
          minWidth: 180
        },
        {
          index: 9,
          isShow: false,
          text: "停车费用（元）",
          sortable: true,
          minWidth: 150,
          isMultiHeader: true,
          children: [
            {
              index: 0,
              isShow: false,
              prop: "parkingValue",
              text: "总",
              sortable: true,
              minWidth: 140
            },
            {
              index: 1,
              isShow: false,
              prop: "parkingPlatformValue",
              text: "一点停",
              sortable: true,
              minWidth: 140
            },
            {
              index: 2,
              isShow: false,
              prop: "parkingParkValue",
              text: "停车场",
              sortable: true,
              minWidth: 140
            },
            {
              index: 3,
              isShow: false,
              prop: "shareOwnerValue",
              text: "业主",
              sortable: true,
              minWidth: 140
            }
          ]
        },
        {
          index: 10,
          isShow: false,
          text: "预定服务费（元）",
          sortable: true,
          minWidth: 110,
          isMultiHeader: true,
          children: [
            {
              index: 0,
              isShow: false,
              prop: "serveValue",
              text: "总",
              sortable: true,
              minWidth: 140
            },
            {
              index: 1,
              isShow: false,
              prop: "servePlatformValue",
              text: "一点停",
              sortable: true,
              minWidth: 140
            },
            {
              index: 2,
              isShow: false,
              prop: "serveParkValue",
              text: "停车场",
              sortable: true,
              minWidth: 140
            }
          ]
        },
        {
          index: 11,
          isShow: false,
          prop: "parkRealValue",
          text: "停车场实际收入（元）",
          sortable: true,
          minWidth: 220
        },
        {
          index: 12,
          isShow: false,
          prop: "platformRelief",
          text: "优惠金额（元）",
          sortable: true,
          minWidth: 160
        },
        {
          index: 13,
          isShow: false,
          prop: "timeoutValue",
          text: "超时惩罚金（元）",
          sortable: true,
          minWidth: 180
        },
        {
          index: 14,
          isShow: false,
          prop: "preParkingValue",
          text: "提前进场费（元）",
          sortable: true,
          minWidth: 180
        },
        {
          index: 15,
          isShow: false,
          prop: "onlinePayValue",
          text: "线上支付金额（元）",
          sortable: true,
          minWidth: 180
        },
        {
          index: 16,
          isShow: false,
          prop: "offlinePayValue",
          text: "线下支付金额（元）",
          sortable: true,
          minWidth: 180
        },
        {
          index: 17,
          isShow: false,
          prop: "oweValue",
          text: "欠费金额（元）",
          sortable: true,
          minWidth: 160
        }
      ],
      tbodysInfo: []
    };
  },
  methods: {
    confirmSearch(params) {
      this.getList();
    }
  }
};
</script>

<style lang="less" scoped>
.ModalBody {
  padding: 20px 35px;
  .HeadMSG {
    display: flex;
    margin-bottom: 10px;
    li:first-child {
      margin-right: 20px;
    }
  }
}
</style>